<script setup>
import request from '@/utils/request'
import { ref, onMounted, watch } from 'vue'
import { Delete, EditPen, Plus } from '@element-plus/icons-vue'
const tableData = ref([])
onMounted(() => {
    select()
})

const currentPage = ref(1)
const pageSize = ref(5)

const handleSizeChange = (val) => {
    pageSize.value = val

}
const handleCurrentChange = (val) => {
    currentPage.value = val
}
watch([currentPage, pageSize], () => {
    select()
})

const form = ref({
    typename: '',
    id: ''
})

const select = async () => {
    const res = await request.get('/booktype')
    console.log(res)
    tableData.value = res.data.data
}

const reset = () => {
    form.value.typename = ''
    form.value.id = ''
    currentPage.value = 1
    select()
}

const dialog = ref(false)
const typeId = ref('')
const type = ref('')
const open = (id) => {
    dialog.value = true
    typeId.value = id
}
const edittype = async () => {
    await request.post('/editype', {
        id: typeId.value,
        type: type.value
    })
    select()
    ElMessage({
        type: 'success',
        message: '修改成功'
    })
    dialog.value = false
}
</script>
<template>
    <h1 class="title">->书籍分类管理</h1>
    <!-- <el-form :model="form" :inline="true" class="form">
        <el-form-item label="id:">
            <el-input v-model="form.id" placeholder="请输入查找分类id" />
        </el-form-item>
        <el-form-item label="类型:">
            <el-input v-model="form.typename" placeholder="请输入查找分类名称" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="select">查找</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
    </el-form> -->
    <el-table :data="tableData" class="table">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="typename" label="书籍分类名" width="300" />
        <el-table-column label="编辑">
            <template #default="{ row }">
                <el-button type="primary" circle :icon="EditPen" @click="open(row.id)"></el-button>
                <!-- <el-button type="danger" circle :icon="Delete" @click="deletebook(row.id)"></el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" layout="total, prev, pager, next, jumper" class="page">
    </el-pagination> -->
    <el-dialog v-model="dialog" title="编辑类型" width="500">
        <el-input v-model="type" style="width: 240px" placeholder="输入类型名" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog = false">取消</el-button>
                <el-button type="primary" @click="edittype">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped lang="scss">
.title {
    margin-left: 8px;
}

.form {
    margin-top: 38px;
}

.table {
    width: 100%;
}

.page {
    margin-top: 18px;
    float: right;
    margin-right: 38px;
}
</style>